<template>
  <view class="container">
    <view class="form-box">
      <view class="form-item">
        <view class="form-large-label">总成绩：</view>
        <view class="form-large-input">
          <input v-model="formData.score" />
        </view>
      </view>
    </view>
    <view class="form-box">
      <view class="form-item">
        <view class="form-label">第一志愿：</view>
        <view class="form-input">
          <input v-model="formData.universityName[0]"
                 placeholder="请填写院校名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label">专<view class="space"></view>业：</view>
        <view class="form-input">
          <input v-model="formData.majorName[0]"
                 placeholder="请填写专业名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
    </view>
    <view class="form-box">
      <view class="form-item">
        <view class="form-label">第二志愿：</view>
        <view class="form-input">
          <input v-model="formData.universityName[1]"
                 placeholder="请填写院校名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label">专<view class="space"></view>业：</view>
        <view class="form-input">
          <input v-model="formData.majorName[1]"
                 placeholder="请填写专业名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
    </view>
    <view class="form-box">
      <view class="form-item">
        <view class="form-label">第三志愿：</view>
        <view class="form-input">
          <input v-model="formData.universityName[2]"
                 placeholder="请填写院校名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label">专<view class="space"></view>业：</view>
        <view class="form-input">
          <input v-model="formData.majorName[2]"
                 placeholder="请填写专业名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
    </view>
    <view class="form-box">
      <view class="form-item">
        <view class="form-label">第四志愿：</view>
        <view class="form-input">
          <input v-model="formData.universityName[3]"
                 placeholder="请填写院校名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label">专<view class="space"></view>业：</view>
        <view class="form-input">
          <input v-model="formData.majorName[3]"
                 placeholder="请填写专业名称"
                 placeholder-class="placeholder" />
        </view>
      </view>
    </view>
    <view class="bottom-sapce"></view>
    <view class="submit-box"
          @tap="doSubmit">
      <view class="submit-btn">模拟提交</view>
    </view>
  </view>
</template>

<script>
import { myRequest, showToastMsg } from '../../utils'

export default {
  data () {
    return {
      loading: false,
      formData: {
        score: '',
        universityName: ['', '', '', ''],
        majorName: ['', '', '', ''],
      }
    }
  },
  onLoad () {
    this.fetchVolResultData()
  },
  methods: {
    fetchVolResultData () {
      const that = this

      uni.showLoading({
        title: '加载中'
      })

      let success = function (res) {
        uni.hideLoading()
        if (res.data.code != 20000) {
          return showToastMsg(res.data.message)
        }

        if (res.data.data !== undefined && res.data.data.length > 0) {
          uni.navigateTo({
            url: '/pages/volunteer_result/volunteer_result'
          })
        }
      }

      let param = {
        url: '/volunteer/result',
        data: {}
      }

      myRequest(param, success)
    },
    doSubmit () {
      const that = this
      let d = that.formData

      if (d.score.length <= 0) {
        return showToastMsg('请填写总成绩')
      }
      if (d.universityName[0].length <= 0) {
        return showToastMsg('请填写第一志愿院校名称')
      }
      if (d.majorName[0].length <= 0) {
        return showToastMsg('请填写第一志愿专业名称')
      }
      if (d.universityName[1].length <= 0) {
        return showToastMsg('请填写第二志愿院校名称')
      }
      if (d.majorName[1].length <= 0) {
        return showToastMsg('请填写第二志愿专业名称')
      }
      if (d.universityName[2].length <= 0) {
        return showToastMsg('请填写第三志愿院校名称')
      }
      if (d.majorName[2].length <= 0) {
        return showToastMsg('请输入第三志愿专业名称')
      }
      if (d.universityName[3].length <= 0) {
        return showToastMsg('请填写第四志愿院校名称')
      }
      if (d.majorName[3].length <= 0) {
        return showToastMsg('请填写第四志愿专业名称')
      }

      if (that.loading) {
        return
      }

      that.loading = true
      uni.showLoading({
        title: '提交中'
      })

      let success = function (res) {
        that.loading = false
        uni.hideLoading()
        if (res.data.code != 20000) {
          return showToastMsg(res.data.message)
        }

        uni.navigateTo({
          url: '/pages/volunteer_result/volunteer_result'
        })
      }

      let param = {
        url: '/volunteer/simulation',
        data: that.formData
      }

      myRequest(param, success)
    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
  padding-top: 40rpx;
}

.form-box {
  width: 750rpx;
  height: auto;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666666;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
}

.form-large-input {
  width: 450rpx;
  height: 64rpx;
  border-radius: 10rpx;
  border: solid 1rpx #999999;
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.form-input {
  width: 450rpx;
  height: 56rpx;
  border-radius: 10rpx;
  border: solid 1rpx #999999;
  padding-left: 20rpx;
  padding-right: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-large-input input {
  height: 64rpx;
}

.form-input input {
  height: 56rpx;
  font-size: 26rpx;
}

.placeholder {
  font-size: 24rpx;
  color: #999999;
}

.form-large-label {
  font-size: 30rpx;
  width: 130rpx;
}

.form-label {
  font-size: 26rpx;
  width: 130rpx;
}

.space {
  display: inline-block;
  width: 52rpx;
}

.bottom-sapce {
  width: 750rpx;
  height: 100rpx;
}

.submit-box {
  width: 750rpx;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}

.submit-btn {
  width: 678rpx;
  height: 64rpx;
  background-color: #5683ec;
  border-radius: 32rpx;
  font-size: 30rpx;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.uni-input {
  font-size: 26rpx;
}
</style>
